<template>
	<view class="message page pd-30">
		<view class="head" :style="{ height: selectData.navBarHeight + 'px', width: selectData.screenWidth + 'px' }">
			<view class="back_box" :style="{ height: selectData.navBarHeight + 'px' }">

				<!-- 状态栏 -->
				<view class="null"
					:style="{ height: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px' }">
				</view>
				<!-- 返回 -->
				<view class="back"
					:style="{ top: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px', height: selectData.navBarHeightTitle + 'px' }">
					<image @click="goBack" class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/back.png"
						mode="aspectFit">
					</image>
					<text class="text ft-32 fw-800 c-33">{{
						'消息'
					}}</text>
					<view :style="{ width: (selectData.menuButtonRight ? selectData.menuButtonRight : 90) + 'px' }"
						style="color: aqua;height: 100px;">
					</view>
				</view>

			</view>

		</view>
		<view :style="{ height: selectData.navBarHeight + 'px', width: selectData.screenWidth + 'px' }"></view>
		<view class="flex">
			<view class="clear" @click="show = true">
				<image class="icon_samll" src="https://cdn.oss.bon-top.cn/static_bc/images/clear.png"></image>
				<text class="ft" style="margin-left: 4rpx;">一键标记已读</text>
			</view>
			<view class="clear ml-24" @click="goSettings">
				<image class="icon_samll" src="https://cdn.oss.bon-top.cn/static_bc/images/shezhi.png"></image>
				<text class="ft" style="margin-left: 4rpx;">设置</text>
			</view>
		</view>
		<view class="cardList pd-20" v-for="(item, index) in cardList" @click="goPage(index)" :key="index">
			<view class="flex-bwt">
				<view class="left flex">
					<image class="wh-84" :src="item.icon"></image>
					<view class="ml-20">
						<view class="ft1">{{ item.title }}</view>
						<view class="ft c-99 mt-10 ft-lue" style="width: 274rpx;">{{ item.txt }}</view>
					</view>
				</view>
				<view class="right">
					<view class="ft c-99">{{ item.time }}</view>
					<view class="msg ft mt-10" v-if="item.num">{{ item.num }}</view>
				</view>
			</view>
		</view>
		<view class="ft1 mt-60">{{ "互动消息" }}</view>
		<view class="cardList-main">
			<view class="cardList active mt-30" v-for="(item, index) in cardList1" :key="index" @click="goPage1(index)">
				<view class="flex" style="align-items: flex-start;">
					<image class="wh-84" :src="item.icon"></image>
					<view class="r flex-bwt">
						<view class="ml-10">
							<view class="ft1">{{ item.title }}</view>
							<view class="ft c-99 mt-10 ft-lue" style="width: 274rpx;">{{ item.txt }}</view>
						</view>
						<view class="right">
							<view class="ft c-99">{{ item.time }}</view>
							<view class="msg ft mt-10" v-if="item.num">{{ item.num }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<up-modal width="518rpx" @confirm="confirm" @cancel="cancel" contentTextAlign="center" :show="show"
			:title="title" :showCancelButton="true" :content="content"></up-modal>
	</view>
</template>
<script setup lang="js">
import {
	onLoad,
	onReady,
	onShow
} from "@dcloudio/uni-app";
import {
	ref,
	reactive,
	nextTick
} from "vue";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";

const cardList = ref([{
	title: "系统通知",
	icon: 'https://cdn.oss.bon-top.cn/static_bc/images/system.png',
	txt: '注册、登录、等信息',
	time: '',
	num: '',
	key: 'unread_system_message_'

},
{
	title: "订单交易",
	icon: 'https://cdn.oss.bon-top.cn/static_bc/images/jiaoyi.png',
	txt: '定购、订单进度等消息',
	time: '',
	num: '',
	key: 'unread_order_message_'

},
{
	title: "活动优惠",
	icon: 'https://cdn.oss.bon-top.cn/static_bc/images/activity.png',
	txt: '没有新的活动',
	time: '',
	num: '',
	key: 'unread_activity_message_'

},
])

const cardList1 = ref([{
	title: "评论",
	icon: 'https://cdn.oss.bon-top.cn/static_bc/images/icon68.png',
	txt: '',
	time: '',
	num: '',
	key: 'unread_comment_message_'
},
{
	title: "问答",
	icon: 'https://cdn.oss.bon-top.cn/static_bc/images/icon69.png',
	txt: '',
	time: '',
	num: '',
	key: 'unread_wait_answer_message_'

},
{
	title: "点赞",
	icon: 'https://cdn.oss.bon-top.cn/static_bc/images/icon67.png',
	txt: '',
	time: '',
	num: '',
	key: 'unread_like_message_'

},
{
	title: "分享",
	icon: 'https://cdn.oss.bon-top.cn/static_bc/images/icon66.png',
	txt: '',
	time: '',
	num: '',
	key: 'unread_visit_message_'

},
])
const selectData = ref({})
onReady(async () => {
	const dpr = uni.getSystemInfoSync().pixelRatio

	const systemInfo = uni.getSystemInfoSync()
	let statusBarHeight = systemInfo.statusBarHeight
	let screenWidth = systemInfo.screenWidth
	let menuButtonInfo = 0
	// #ifdef MP
	menuButtonInfo = wx.getMenuButtonBoundingClientRect();
	// #endif
	let navHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
	let navBarHeight = Number(navHeight + statusBarHeight);//导航总高
	selectData.value = {
		headHeight: navHeight,
		screenWidth: screenWidth,
		statusBarHeight: statusBarHeight,
		navBarHeight: navBarHeight,//导航总高
		navBarContentTop: navHeight + statusBarHeight,//导航文插槽距离顶部距离
		navBarHeightTitle: navHeight,//导航文字模块总高
		capsuleSpace: systemInfo.screenWidth - menuButtonInfo.right + 6,
		menuButtonWidth: menuButtonInfo.width,
		menuButtonRight: (screenWidth - menuButtonInfo.right) + menuButtonInfo.width,
	}
})

const show = ref(false)
const title = ref('清除未读');
const content = ref('确定要一键标记所有消息已读吗？');
const confirm = () => {
	show.value = false
	utils
		.request(
			api.messageRead, {
			is_all: 1
		},
			"post"
		)
		.then((res) => {
			getMessageCenter()
		});
}

const goSettings = () => {
	uni.navigateTo({
		url: "/subpackage/message/settings",
	});
}

const goPage = (idx) => {
	if (idx === 0) {
		uni.navigateTo({
			url: "/subpackage/message/notice?type=1",
		});
	} else if (idx === 1) {
		uni.navigateTo({
			url: "/subpackage/message/notice?type=2",
		});
	} else if (idx === 2) {
		uni.navigateTo({
			url: "/subpackage/message/notice?type=3",
		});
	}

}


const goPage1 = (idx) => {
	if (idx === 0) {
		uni.navigateTo({
			url: "/subpackage/message/interaction?type=4",
		});
	} else if (idx === 1) {
		uni.navigateTo({
			url: "/subpackage/message/interlocution?type=5",
		});
	} else if (idx === 2) {
		uni.navigateTo({
			url: "/subpackage/message/thumbs?type=6",
		});
	} else if (idx === 3) {
		uni.navigateTo({
			url: "/subpackage/message/share?type=7",
		});
	}

}
const cancel = () => {
	show.value = false
}

const getMessageCenter = () => {
	utils
		.request(
			api.messageCenter, {},
			"get"
		)
		.then((res) => {
			let obj = {
				num: ''
			}
			const info = res.data.info
			for (let key in info) {
				// 处理互系统模块数据
				let find = cardList.value.find(f => key.includes(f.key))
				if (find) {
					let arr = ['txt', 'num', 'time']
					arr.forEach(f => find[f] = info[find.key + f])
				}
				// 处理互动消息模块数据
				let find1 = cardList1.value.find(f => key.includes(f.key))
				if (find1) {
					let arr = ['txt', 'num', 'time']
					arr.forEach(f => find1[f] = info[find1.key + f])
				}

			}

		});
}
onLoad(() => {
	getMessageCenter()
})
onShow(() => {
	getMessageCenter()
})
const goBack = () => {
	uni.navigateBack(-1)
}
</script>

<style lang="scss" scoped>
.head {
	height: 290rpx;
	// background: linear-gradient(180deg, #FFF3EC 0%, rgba(251, 255, 223, 0) 100%);
	background: linear-gradient(to bottom, #F9FFCE, #fff);
	// background-color: red;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	border-bottom: 2rpx solid #f1f1f1;

	.back_box {
		position: relative;

		.bg {
			height: 290rpx;
			position: absolute;
			top: 0;
			left: 0;
			background: linear-gradient(180deg, #FFF3EC 0%, rgba(251, 255, 223, 0) 100%);

		}

		.back {
			// position: absolute;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			overflow: hidden;

			.text {
				width: 366rpx;
				text-align: center;

			}
		}

		.headerContent {
			// background-color: red;
			// position: absolute;
			border-top: 2rpx solid #f1f1f1;
			padding: 30rpx 26rpx;

			.msg_box {
				margin-top: 20rpx;

				.msg_box_item {
					height: 52rpx;
					line-height: 52rpx;
					padding: 0 20rpx;
					border-radius: 20rpx;
					background-color: #F8F8F8;
					margin-right: 20rpx;
					justify-content: flex-start;
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.icon {
		width: 28rpx;
		height: 48rpx;
		margin-left: 30rpx;
		margin-right: auto;
	}
}

.cardList {
	width: 100%;
	height: 124rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	margin: 30rpx auto 0;

	.msg {
		width: 44rpx;
		height: 28rpx;
		background: #ff0000;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		font-size: 20rpx;
		color: #ffffff;
	}

	.right {
		text-align: center;
		display: flex;
		flex-direction: column;
		// justify-content: flex-end;
		align-items: flex-end;
		flex-shrink: 0;
	}
}

.cardList.active {
	height: unset;
	background: unset;

	.r {
		width: 586rpx;
		margin-left: 20rpx;
		border-bottom: 2rpx solid #F1F1F1;
		padding-bottom: 30rpx;
	}
}

.cardList-main {
	.cardList.active:last-child {
		.r {
			border-bottom: none;
		}
	}
}
</style>